DHTML steuert die Interaktion zwischen Web Browser und Benutzer

a) Benutzersicht

Um eine konventionelle HTML-Seite zu ändern, muss der Webserver die Seite modifizieren und dem Client (Web Browser) erneut senden. DHTML vermeidet diesen ressourcenintensiven Umweg, indem es nach einer Benutzeraktion die Webseite lokal, das heisst auf dem Client, modifiziert.

Das folgende Beispiel zeigt, wie DHTML den Inhalt einer Webseite ändert, ohne den Umweg über den Web Server zu nehmen. Weil ein Hilfethema nichts anderes als eine Webseite ist, demonstrieren wir die Wirkung ausgewählter DHTML-Befehle auf dieser Seite:

Wenn Sie auf die Schaltfläche "Titel ändern" drücken, wird der Titel "DHTML-Beispiel" durch den von Ihnen eingegebenen neuen Titel ersetzt:

DHTML-Beispiel

b) Entwicklersicht

Das obige Beispiel lässt sich wie folgt verallgemeinern: Das Objektmodell von Internet Explorer lässt den DHTML-Programmierer beliebige HTML-Tags zur Laufzeit ändern. Ein Tag ist ein in Winkelklammern eingebetteter Befehl, der den Browser instruiert, wie eine HTML-Zeichenkette angezeigt werden soll. Der Tag <font face=Helvetica> weist ihn zum Beispiel an, die Zeichen nach dem Tag im Helvetica-Zeichensatz anzuzeigen.

InnerText

Der folgende Code implementiert das obige Beispiel:

<h4 id=änderbarerText>DHTML-Beispiel</h4>
<input type='text' size='31' value='Neuer Titel?' id='Eingabefeld'>
<input type='button' value='Titel ändern'
   onclick='(document.all.änderbarerText.innerText=document.all.Eingabefeld.value)'>

Der Code besteht aus einem h4-Befehl und zwei input-Befehlen:

1. <h4> und </h4> begrenzen einen Titel (header) der Grösse 4
2. id=... identifiziert einen mit DHTML änderbaren Tag
3. <input type='text'... fügt ein Textfeld zur interaktiven Eingabe ein
4. <input type='button'... fügt eine Schaltfläche ein
5. onclick ist ein Ereignis, dem in runden Klammern eine Ereignisprozedur folgt. Die Ereignisprozedur unseres Beispiels weist dem Tag änderbarerText den Inhalt des Eingabefelds zu.

Ein von Testverwaltung.mdb exportierter Web Quiz besteht aus einer einzigen Webseite, die mit Hilfe von DHTML ausgewählte Seiteninhalte zur Laufzeit ändert und auf verschiedenen Bildschirmseiten anzeigt. 

innerText ist eine Eigenschaft des DHTML-Objektmodells, die in Testverwaltung.mdb oft vorkommt. Die obige Ereignisprozedur ändert den Wert der Eigenschaft änderbarerText.innerText durch eine Zuweisung:

document.all.änderbarerText.innerText=document.all.Eingabefeld.value

InnerHTML

innerText ändert normalen Text. innerHTML ermöglicht hingegen die Änderung von HTML-Code, der vom Browser vor der Anzeige interpretiert wird. Die folgende Anweisung weist zum Beispiel dem Tag mit der Identifikation änderbaresHTML einen Text mit den noch zu interpretierenden Formatcodes <I> und </I> zu:

document.all.änderbaresHTML.innerHTML="DHTML ist <I>cool</I>"

Ein Klick auf die folgende Schaltfläche zeigt die Auswirkung dieser Anweisung:

innerHTML-Beispiel

DHTML steuert zum Beispiel einen clientzentrierten Web Quiz

Ein Web Quiz enthält - analog zu einem Access Quiz - die folgenden Bildschirmseiten:

• Startseite mit den Schaltflächen Test lösen, Musterlösung anzeigen und Hilfe

• Menüseite mit Hyperlinks zu den Aufgaben

• Aufgabenseite mit der jeweils laufenden Aufgabe.

Wir skizzieren am Beispiel einer Aufgabenseite, wie Sie mit VBScript eine DHTML-Seite ändern können. Eine Aufgabenseite basiert auf Datenfeldern, deren Werte während der Quizgenerierung aus den Kurzbeschreibungen, Fragen, Antworten und Lösungen der Aufgabenbank erzeugt werden. Die erste Mehrfachwahlaufgabe eines Quiz lässt sich zum Beispiel wie folgt in der jeweils ersten Zelle bzw. Zeile der Datenfelder Frage, Antwort und Lösung darstellen:

Frage(1) = "Was ergibt 1+1?"      'Mehrfachwahlfrage
Antwort(1,1) = "2"                '1. Alternative
Antwort(1,2) = "3"                '2. Alternative
Antwort(1,3) = "11"               '3. Alternative
Antwort(1,4) = "1"                '4. Alternative
Lösung(1) = 1                     'richtige Antwort

VBScript transformiert die Inhalte dieser Datenfelder in DHTML-Anweisungen an den Browser. Ein Teil des VBScript-Code folgt den oben eingeführten Anweisungen document.all.änderbaresHTML.innerHTML =<normaler Text> bzw. document.all.änderbaresHTML.innerHTML=<HTML-formatierter Text> und fügt einen neuen Fragentext oder neue Antwortalternativen auf der Aufgabenseite ein.

In Internet Explorer können Sie mit »Rechtsklick/Quelltext anzeigen den von Testverwaltung.mdb erzeugten DHTML-Code inspizieren. Die Access-Ereignisprozedur, welche diesen Code erzeugt, finden Sie  im Modul Form_FrmExportWebQuizMitSelbstkorrektur.

Einen Access Quiz exportieren